<template>
	<view :style="{'margin-top': `${$px2rpx(styles.margin_top)}rpx`}"  v-if="content.data.length">
		<widget-root :styles="styles">
			<view class="title">
				<view class="title-content" :style="{
				              color: styles.header_title_color,
				              'font-size': `${$px2rpx(styles.header_title_size)}rpx`,
				          }">{{content.header_title}}</view>
			</view>
			<goods :content="content" :styles="styles" />
		</widget-root>
	</view>
</template>

<script type="text/javascript">
	import goods from '../goodsgroup/goods.vue'
	export default {
		components: {
			goods
		},
		props: {
			content: {
				type: [Object, Array]
			},
			styles: {
				type: [Object, Array]
			},
		},
		data() {
			return {}
		},
		methods: {

		},
		computed: {

		}
	};
</script>
<style lang="scss" scoped>
	.title {
		padding: 30rpx 0;
		text-align: center;

		.title-content {
			display: inline-flex;
			align-items: center;
			font-weight: bold;

			&::before,
			&::after {
				content: '';
				display: inline-block;
				width: 98rpx;
				height: 1px;
				margin: 0 20rpx;
				background: #dcdfe6;
			}
		}
	}
</style>
